<template>
	<div class="select">
		<div class="selected" @click.stop="show=!show" v-clickoutside='out'>{{value}}</div>
		<!--<div class="selected" @click.stop="show=true" v-clickoutside='show=false'>{{value}}</div>-->
		<div class="options" v-if="show">
			<div class="option" v-for="item in option" @click='select(item)'>{{item}}</div>
		</div>

	</div>
</template>

<script type="text/ecmascript-6">
	export default {
		components: {},
		props: ['option'],
		directives: {
			clickoutside: {
				bind(el, binding, vnode) {
					function documentHandler(e) {
						if(el.contains(e.target)) {
							return false;
						}
						if(binding.expression) {
							binding.value(e);
						}
					}
					el.ClickOutside = documentHandler;
					document.addEventListener('click', documentHandler)
				},
				unbind(el, binding, vnode) {
		  		document.removeEventListener('click', el.ClickOutside)
		  		delete el.ClickOutside;
				}
			}
		},
		data() {
			return {
				show: false,
				value: this.option[0]
			}
		},
		mounted() {
			console.log()
		},
		methods: {
			select(v) {
				this.value = v
			},
			out() {
				this.show = false
			}
		},
		computed: {}
	};
</script>

<style lang="scss" scoped>
	.select {
		background: #fff;
		width: 100px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
		.selected{
			border: 1px solid #000;
			border-radius: 99rem;
		}
		.options {
			border: 1px solid #000;
			border-radius: 5px;
			padding: 5px;
			background-color: #fff;
			.option {}
		}
	}
</style>